<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />


    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/font.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/xadmin.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/lib/layui/css/layui.css')}}">


    <script src="{{URL::asset('resources/xadmin/lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/xadmin.js')}}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<div class="layui-fluid layui-container" >
    <div class="layui-row ">


        <div style="text-align: left;">
            <div class="layui-inline">

                <form class="layui-form "  style="padding: 0;margin-top:80px">


                    <!-- 这里title是在网页上显示的数据，value是用Ajax发送的实际的值 -->

                    <div class="layui-form-item">
                        <label for="controller" class="layui-form-label">
                            <span class="x-red">*</span>成员姓名
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="member_name" name="member_name" required="" lay-verify="member_name"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>
                        </div>
                    </div>

                    <div class="layui-form-item" id="controller_div">
                        <label for="controller" class="layui-form-label">
                            <span class="x-red">*</span>成员角色
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="member_role" name="member_role" required="" lay-verify=""
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>
                        </div>
                    </div>
                  
                    <div class="layui-form-item" id="controller_div">
                        <label for="controller" class="layui-form-label">
                            <span class="x-red">*</span>多图上传
                        </label>
                        <input type="text" id="imageurl" name="imageurl" required="" lay-verify=""
                                   autocomplete="off" class="layui-input" style="display: none">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>选择图片
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary" id="testListAction">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>

                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list" id="demo2"></div>
                            </blockquote>
                        </div>
                    </div>





                    <div class="layui-input-inline">

                        <div class="layui-btn-group">
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>

                            <label for="L_repass" class="layui-form-label">
                            </label>
                            <button  class="layui-btn" lay-filter="add" lay-submit="">
                                提交
                            </button>
                        </div>
                    </div>

            </div>

            </form>
        </div>
    </div>
</div>
</div>
<script>
    layui.use(['form', 'layer','jquery','upload'],function() {

        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        //自定义验证规则
        form.verify({
            member_name: [/(.+){2,12}$/,'最少也得俩字啊'],
            // controller: [/(.+){2,12}$/,'控制器最少也得俩字啊'],
            controller: [/(.+){2,12}$/,'控制器最少也得俩字啊'],
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function(value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });


        // 提交文件的渲染  (没有写好删除的功能)
        upload.render({
        elem: '#test1'
        ,url: '{{URL::action('Admin\HouseController@fileupload')}}'
        ,headers:{
                'X-CSRF-TOKEN' : $("meta[name='csrf-token']").attr('content')
            }
        ,auto: false //选择文件后不自动上传
        ,multiple:true
        ,bindAction: '#testListAction' //指向一个按钮触发上传
        ,choose: function(obj){
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();
            
            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function(index, file, result){
            console.log(index); //得到文件索引
            console.log(file); //得到文件对象
            console.log(result); //得到文件base64编码，比如图片
            
            $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width=300px height=300px>')
            //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
            
            //这里还可以做一些 append 文件列表 DOM 的操作
            
            //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
         
            // delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
            });
        }
        ,done: function(res, index, upload){
            //假设code=0代表上传成功
            if(res.code == 0){
            //do something （比如将res返回的图片链接保存到表单的隐藏域）
            console.log(res.msg)
             $("#imageurl").val(res.msg);
            layer.alert("上传成功")
            }
        }
    });  
         

        //监听提交
        form.on('submit(add)',
            function(data) {
                console.log(data);
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                //console.log($('input[name="gender"]:checked').val());
                //发异步，把数据提交给php

                // 发送异步请求给后端
                $.ajax({
                    //请求的地址
                    url:'{{URL::action('Admin\HouseController@add')}}',
                    //请求的方式的为 POST
                    type:'post',
                    //请求过去的数据 ---->表单的数据
                    data:{add_data:data.field},
                    headers : {
                        'X-CSRF-TOKEN' : $("meta[name='csrf-token']").attr('content')
                    },
                    beforeSend:function () {
                        this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                    },

                    //返回成功的
                    success:function(data){
                        console.log(data)
                        if(data.status=='error'){
                            layer.msg('Error',{
                                icon:5//失败的表情
                                ,time:1000
                            })
                            //return ;
                        }else{
                            layer.msg('Successful Add!',{
                                icon:6,//成功的表情
                                time:1000
                            },function(){
                                // location.reload();
                                // obj.del();
                                xadmin.father_reload();
                            });
                        }
                    },
                    complete:function(){
                        layer.close(this.layerIndex);
                    }
                })
                layer.alert("增加成功", {
                        icon: 6
                    },
                    function() {
                        //关闭当前frame
                        xadmin.close();

                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                return false;


            });
    });
</script>

</body>

</html>
